<template>
  <section class="voucher-detail">
    <info :clientInfo="clientInfo" :tagText="clientInfo.type == 1? '一般纳税人': '小规模纳税人'" />
    <div class="data-content">
      <div class="container">
        <img class="pic" :src="'data:image/jpg;base64,' + imageBase64" @load="onload"/>
      </div>
    </div>
  </section>
</template>


<script>
import info from "@/components/infoHeader";


const names = {
  specialVatInvoice: "已认证的增值税专用发票",
  otherDeductItem: "其他抵扣项",
  inTaxOutItem: "进税项转出",
  totalItem: "总计",
};
export default {
  data() {
    return {
      clientInfo: {},
      imageBase64: ""
    };
  },

  components: {
    info,
  },

  created() {
    const data = localStorage.getItem("valueAddedTaxDetail");
    
    if (data) {
      this.clientInfo = JSON.parse(data);
      console.log('查看税金：', this.clientInfo);
      this.loadImage();
    }
  },

  methods: {
    loadImage() {
      this.$http
        .get("/incomeTax/getDeclareTaxesImageMsg", {
          params: {
            bizId: this.clientInfo.id,
            taxType: this.clientInfo.taxType,
            imageType: this.clientInfo.imageType
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.imageBase64 = res.data.imageData;
          }
        });
    },
     onload(e){
         const img = e.target;
         let width = 0;
         let widthrate = 0;
         let windowWidth = window.screen.availWidth * 0.7;
         if (img.fileSize > 0  || (img.width > 1 && img.height > 1)) {
           width = img.width;
           
           if (width < windowWidth) {
             width = windowWidth;
             widthrate = 1;

           } else{
             widthrate = width / windowWidth;
            width = width / widthrate;
            img.width = img.width / widthrate - 40;
            // img.height = img.height / widthrate;
           }
        }
      },
  },
};
</script>
<style scoped>
.voucher-detail {
  padding: 0 10px;
}
.header-item {
  font-size: 14px;
  color: #333;
}
.data-content {
  margin-top: 20px;
  padding: 20px 20px 40px;
  background: #fff;
  box-sizing: border-box;
}
.btns-content {
  margin-bottom: 30px;
}
.container{
  display: flex;
  display: -webkit-flex;
  align-items:center;
  justify-content:center;
}
</style>